<script setup>
import {ref, nextTick} from 'vue'
import {chat} from "@/netForAxios/net.js";

const messages = ref([])
const input = ref('')
const chatBox = ref(null)

function send() {
  const text = input.value.trim()
  if (!text) return
  // 用户消息
  messages.value.push({role: 'user', content: text})
  input.value = ''
  nextTick(() => chatBox.value.scrollTop = chatBox.value.scrollHeight)
  // 模拟 AI 回复
  chat(text,(response)=>{
    messages.value.push({role: 'assistant', content: response})
  })
  nextTick(() => chatBox.value.scrollTop = chatBox.value.scrollHeight)
}
</script>
<template>
  <div class="chat-container">
    <!-- 对话框 -->
    <div class="chat-box" ref="chatBox">
      <div
          v-for="(msg, index) in messages"
          :key="index"
          :class="['message', msg.role]"
      >
        <div class="bubble">
          <p v-if="msg.role === 'assistant'">Kimi: {{ msg.content }}</p>
          <p v-else>{{ msg.content }}</p>
        </div>
      </div>
    </div>
    <!-- 输入框 -->
    <div class="input-area">
      <div class="input-box">
        <el-input
            v-model="input"
            resize="none"
            :autosize="{ minRows: 2, maxRows: 10 }"
            type="textarea"
            @keydown.enter.prevent="send"
            placeholder="Enter输入问题,尽管问"
            class="input-textarea"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.chat-container {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: rgb(245, 246, 250);
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.chat-box {
  width: 55%; /* 占满剩余高度 */
  overflow-y: auto; /* 关键：仅这里出滚动条 */
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.message {
  margin-top: 2%;
  display: flex;

}

/* AI 消息：靠左 */
.message.assistant {
  justify-content: flex-start;
}

.message.assistant .bubble {

  background: #fff;
}

/* 用户消息：靠右 */
.message.user {
  justify-content: flex-end;
}

.message.user .bubble {

  background: #e1dffd;
}

.input-area {
  width: 100%;
  height: 10%;
  margin-bottom: 3%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.input-box {
  width: 55%;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}

</style>